<template>
  <div class="my-container">
    <!-- 左边 -->
    <el-card class="left-box-card">
      <!-- 我的 -->
     <div class="my">
       <div class="left">
          <el-avatar :size="118" :src="userInfo.avatar"></el-avatar>
       </div>
       <div class="center">
         <p>{{userInfo.nickname}}</p>
         <p>
           <a>312<span>获赞</span></a>
           <a>310<span>粉丝</span></a>
           <a>219<span>关注</span></a>
         </p>
         <p>简介：{{userInfo.introduce || 'TA很懒，还没有添加简介'}}</p>
       </div>
       <div class="right">
         <el-button  round  icon="el-icon-edit" size="small" @click="$router.push({name: 'NewsUserSettings'})">编辑资料</el-button>
       </div>
     </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="历史" name="history">
      <historyItem :data="history"> </historyItem>
    </el-tab-pane>
    <el-tab-pane label="收藏" name="collection">
      <collectionItem :data="collection"/>
    </el-tab-pane>
    <el-tab-pane label="评论" name="comments">
      <commentItem :data="comment"/>
    </el-tab-pane>
    <el-tab-pane label="点赞" name="likes">
      <likesItem :data="likes"/>
    </el-tab-pane>
    <el-tab-pane label="关注" name="focus">
       <focus :data="followings" @refresh="getUserFollowings"/>
    </el-tab-pane>
    <el-tab-pane label="粉丝" name="fans">
      <fans  :data="followers"> </fans>
    </el-tab-pane>
    <el-tab-pane label="文章" name="article">
       <articleItem :data="article" /> 
    </el-tab-pane>
    <el-tab-pane label="举报" name="accusation" v-if="this.user_id==userId">
      <accusation :data="accusation" @refresh="getUserReport"/>
    </el-tab-pane>
  </el-tabs>

    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import historyItem from '@/news/views/components/item'
import collectionItem from '@/news/views/components/item'
import likesItem from '@/news/views/components/item'
import articleItem from '@/news/views/components/articleItem'
import fans from '@/news/views/components/Friends'
import focus from '@/news/views/components/focus'
import commentItem from '@/news/views/components/commentItem'
import accusation from '@/news/views/components/accusation'
import { getUserFollowers,getUserFollowings,getUserHomePage} from "@/api/news/pc-web/user";
import { getUserComment} from "@/api/news/pc-web/comment";
import { getUserArticleViewHistory ,getUserArticleCollections,getUserArticleLikings,getUserArticle,getUserReport} from "@/api/news/pc-web/article";
export default {
  name: "User",
  components:{
    historyItem,
    collectionItem,
    likesItem,
    fans,
    focus,
    commentItem,
    articleItem,
    accusation
  },
  data() {
    return {
      activeName: 'likes',
      history:{},
      collection:{},
      likes:{},
      followers:{},
      followings:{},
      comment:{},
      article:{},
      accusation:{},
      userInfo:{},
      user_id:this.$route.params.user_id,
    };
  },
  watch: {
	'$route' (to, from) { //监听路由是否变化
  console.log(to, from);
		if(to.params.user_id != from.params.user_id){
		   this.user_id = to.params.user_id;
      this.getUserHomePage(this.user_id)
       this.getLikings(this.user_id)
		}
    if(to.hash != from.hash){
      if (to.hash ==='#collection') {
        this.activeName = 'collection'
         this.getCollection(this.user_id)
      }else if (to.hash === '#history'){
         this.getHistory(this.user_id)
          this.activeName = 'history'
      }
       this.activeName = 'likes'
    }
	}
},
  created() {
    if(this.$route.hash && this.user_id){
       if(this.$route.hash=='#collection'){
        this.getCollection(this.user_id)
        this.activeName = 'collection'
      }
      if(this.$route.hash=='#history'){
        this.getHistory(this.user_id)
        this.activeName = 'history'
      }
      if(this.$route.hash=='#comments'){
        this.getUserComment(this.user_id)
        this.activeName = 'comments'
      }
      // if(this.$route.hash=='#likes'){
      //   this.getLikings(this.user_id)
      //   this.activeName = 'likes'
      // }
    }
   

    if (this.user_id) {
      this.getUserHomePage(this.user_id)
       this.getLikings(this.user_id)
    }
  },
   computed: {
    ...mapGetters(["avatar",'userId','name']),
  },
   methods: {
      handleClick() {
        if(this.activeName == 'history'){
          this.getHistory(this.user_id)
        }else if(this.activeName == 'collection'){
          this.getCollection(this.user_id)
        }else if(this.activeName == 'comments'){
          this.getUserComment(this.user_id)
        }else if(this.activeName == 'likes'){
          this.getLikings(this.user_id)
        }else if(this.activeName == 'focus'){
          this.getUserFollowings(this.user_id)
        }else if(this.activeName == 'fans'){
          this.getFollowers(this.user_id)
        }else if(this.activeName == 'article'){
          this.getUserArticle(this.user_id)
        }else if(this.activeName == 'accusation'){
         this.getUserReport(this.user_id)
        }
      },
      // 获取用户信息
      async getUserHomePage(user_id){
        const user = await getUserHomePage(user_id)
        this.userInfo = user
      },
        // 获取用户举报文章列表
        async getUserReport(user_id){
          this.accusation = await getUserReport(user_id)
        },
        // 获取用户文章列表
        async getUserArticle(user_id){
          this.article = await getUserArticle(user_id)
        },
      // 获取用户评论列表
      async getUserComment(user_id){
        this.comment = await getUserComment(user_id)
      },
      // 获取用户关注列表
      async getUserFollowings(user_id){
        this.followings = await getUserFollowings(user_id)
      },
      // 获取用户粉丝列表
      async getFollowers(user_id){
        this.followers = await getUserFollowers(user_id)
      },
      // 获取用户浏览文章历史记录
      async getHistory(user_id){
        this.history = await getUserArticleViewHistory(user_id)
      },
       // 获取用户收藏文章列表
      async getCollection(user_id){
        this.collection = await getUserArticleCollections(user_id)
      },
       // 获取用户点赞文章列表
      async getLikings(user_id){
        this.likes = await getUserArticleLikings(user_id)
      }
    }
};
</script>
<style lang="scss" scoped>
.my-container {
  margin-top: 15px;
  width: 851px;
    min-width: 851px;
  // height: 100vh;
}
.my{
  margin-top: 28px;
  width: 100%;
  height: 118px;
  // background: rgb(236, 233, 233);
  display:flex;
  .left{
  width: 118px;
  .el-avatar{
    border: 4px solid #eee
  }
  }
  .center{
  margin:8px 30px 0 50px;
  width: 526px;
  p{
  margin:0;
  }
   p:nth-child(1){
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
   }
    p:nth-child(2){
    margin-bottom: 15px;
    a{
    font-weight: 500;
      font-size: 24px;
      margin-right: 20px;
    }
    span{
    font-weight: 400;
      margin-left: 3px;
      font-size: 15px;
    }
    
   }
   p:nth-child(3){
   font-size: 16px;
white-space: nowrap;
 text-overflow: ellipsis;
overflow: hidden; //隐藏文字
   }
  }
  .right{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  }
}
.el-tabs{
  margin-top: 48px;;
  // height: 100vh;
}

</style>
